<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket演示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="webSocket.min.js"></script>
</head>
<body>
<center>
    <p>我的uid：<span id="myUid"></span></p>
    <button class="btn" onclick="handleCMD({cmd: 'query'})">获取聊天室用户</button>
    <div class="user-list">

    </div>
    <button class="anser-btn">接听</button>
    <button class="reject-btn">拒接</button>
    <button class="closed-btn">主动挂断</button>
    <div id="myConsole"></div>
    <div>

    </div>
</center>
<script type="text/javascript">

    // 随机生成uid，正式使用时可以自己设置生成方式，uid可以是字符串可以是数字
    var uid = Math.round(Math.random() * 1000)

    // 在dom中展示一下自己的uid
    document.getElementById('myUid').innerHTML = uid

    // 实例化socket对象
    // 参数1: 当前用户id
    // 参数2: socket服务器地址
    var ws = webSocket({
        uid: uid,
        server: "wss://textstream.suji.work:8188"
    })

    function handleCMD(data) {
        // 参数1: 命令名称
        // -> 拨打的命令为call;
        // -> 查询在线用户的命令为query(注意：所有查询，都不需要传入cid)
        // -> 接听电话的命令为answer
        // -> 拒接电话的命令为reject
        // 参数2: clientid。被呼叫方的uid
        ws.cmd(data)
    }


    // 监听服务器返回的事件（包括广播事件）
    ws.watching(function (res) {
        if (res.code === 101) {
            // 101: 用户登陆成功反馈
        } else if (res.code === 2101 || res.code === 2102) {
            var list = res.data
            // 2102: 用户列表更新的广播
            // 将获取的所有用户插入到dom中
            var str = ''
            for (var i = 0; i < list.length; i++) {
                str += '<button class="user-btn" onclick="handleCMD({cmd: \'call\', cid: ' + list[i] + '})">呼叫用户' + list[i] + '</button>\n'
            }
            document.querySelector('.user-list').innerHTML = str
        } else if (res.code === 1200) {

            // 触发接听按钮
            document.querySelector('.anser-btn').onclick = function () {
                console.log('绑定接听事件')
                handleCMD({cmd: 'answer', cid: res.cid})
                document.querySelector('.anser-btn').onclick = null
            }

            // 触发拒接按钮
            document.querySelector('.reject-btn').onclick = function () {
                console.log('绑定拒接事件')
                handleCMD({cmd: 'reject', cid: res.cid})
                document.querySelector('.reject-btn').onclick = null
            }
            // console.log(res.msg)
        } else if (res.code === 1111) {
            // 接听了呼叫
            console.log(res.msg)
        } else if (res.code === 1112) {
            // 拒绝了接听
            console.log(res.msg)
        } else if (res.code === 1102) {
            // 正在呼叫
            console.log(res.msg)
            // 触发挂断按钮
            document.querySelector('.closed-btn').onclick = function () {
                console.log('绑定拒接事件')
                handleCMD({cmd: 'closed', cid: res.cid})
                document.querySelector('.closed-btn').onclick = null
            }
        } else if (res.code == 1101) {
            // 监听所有用户通知列表
            console.log(res.msg, res.data)
        }
    })
</script>
</body>
</html>
